<template>
  <div class="contextForm">
    <Form :model="formItem" :label-width="150" class="consumerForm">
      <div class="item-title">简历付费</div>
      <!-- <FormItem label="新人注册">
        <RadioGroup v-model="formItem.radio">
          <Radio label="male">开启</Radio>
          <Radio label="female">关闭</Radio>
        </RadioGroup>
        <br>
        <span class="alert">新人注册奖励，由平台奖励用户，登陆用手机号招聘小程序即可获得该奖励</span>
      </FormItem>
      <FormItem label="奖励金额">
        <Input
          v-model="formItem.input"
          placeholder="Enter something..."
          type="number"
          style="width:200px"
        ></Input>
        <span>&nbsp&nbsp元</span>
      </FormItem>
      <FormItem label="完善简历">
        <RadioGroup v-model="formItem.radio">
          <Radio label="male">开启</Radio>
          <Radio label="female">关闭</Radio>
        </RadioGroup>
        <br>
        <span class="alert">完善简历奖励，由平台奖励用户，登陆用手机号招聘小程序即可获得该奖励</span>
      </FormItem>
      <FormItem label="奖励金额">
        <Input
          v-model="formItem.input"
          placeholder="Enter something..."
          type="number"
          style="width:200px"
        ></Input>
        <span>&nbsp&nbsp元</span>
      </FormItem>-->
      <!-- <FormItem label="悬赏佣金">
        <RadioGroup v-model="formItem.is_open_reward">
          <Radio label="1">开启</Radio>
          <Radio label="0">关闭</Radio>
        </RadioGroup>
        <br>
        <span class="alert">
          开启后企业必须发布岗位必须选择悬赏金额
          <br>悬赏佣金，是由企业发布佣金，悬赏推荐人专用，
        </span>
        <br>
        <span class="alert">1.没有间接推荐人，直接推荐人可获得100%佣金</span>
        <br>
        <span class="alert">2.有间接推荐人，直接推荐人可获得50%，其余间接推荐人可平分50%</span>
        <br>
        <span class="alert">3.若没有推荐人，则企业发布的悬赏由平台获得，投递简历求职者没有佣金可拿</span>
      </FormItem>-->
      <FormItem label="简历付费">
        <RadioGroup v-model="formItem.is_open_resume_pay">
          <Radio label="1">开启</Radio>
          <Radio label="0">关闭</Radio>
        </RadioGroup>
        <br />
        <span class="alert">开启后企业必须付费查看简历，若企业发布职位时选择悬赏红包金额，则查看简历金额为付费简历+悬赏金额</span>
      </FormItem>
      <FormItem label="付费金额" v-if="formItem.is_open_resume_pay == '1'">
        <Input
          v-model="formItem.resume_pay"
          placeholder="请输入付费金额"
          type="number"
          style="width:200px"
        ></Input>
        <span>&nbsp&nbsp元</span>
        <br />
        <span class="alert">最低金额1元，默认10元</span>
      </FormItem>
      <FormItem label="企业电话">
        <RadioGroup v-model="formItem.is_show_phone">
          <Radio :label="1">开启</Radio>
          <Radio :label="2">投递简历后可拨打</Radio>
          <Radio :label="0">关闭</Radio>
        </RadioGroup>
        <br />
        <span class="alert">
          默认开启，开启后用户可在职位详情页面拨打企业电话，与企业进行沟通，关闭后小程序端不显示企业电话
          <br />投递简历后拨打，用户只有投递简历后，才可拨打电话，引导用户完善简历
        </span>
      </FormItem>
      <FormItem label="职位审核">
        <RadioGroup v-model="formItem.is_audit_job">
          <Radio :label="1">开启</Radio>
          <Radio :label="0">关闭</Radio>
        </RadioGroup>
        <br />
        <span class="alert">默认开启，关闭后企业发布职位不用审核</span>
      </FormItem>
      <div class="item-title">提现设置</div>
      <FormItem label="最低提现额度">
        <Input
          v-model="formItem.min_withdraw_limit"
          placeholder="请输入最低提现额度"
          type="number"
          style="width:200px"
        ></Input>
        <span>&nbsp&nbsp元</span>
        <br />
        <span class="alert">最低金额1元，默认10元</span>
      </FormItem>
      <div class="item-title">
        权益配置
        <span style="color:red">仅对新注册企业生效，非会员的初始权益值</span>
      </div>
      <div class="menu">
        <div class="menu-config">
          <FormItem label="刷新职位次数">
            <InputNumber
              v-model="formItem.refresh_job_times"
              placeholder="请输入数字"
              type="number"
              style="width:200px"
            ></InputNumber>
            <span>&nbsp&nbsp次</span>
            <br />
            <span class="alert">修改职位信息，职位管理刷新日期各为刷新一次，填写0则没有刷新次数</span>
          </FormItem>
        </div>
        <div class="menu-config">
          <FormItem label="发布职位次数">
            <InputNumber
              v-model="formItem.publish_job_times"
              placeholder="请输入数字"
              type="number"
              style="width:200px"
            ></InputNumber>
            <span>&nbsp&nbsp次</span>
            <br />
            <span class="alert">发布新职位，下线后重新发布各为发布一次，填写0则没有发布次数</span>
          </FormItem>
        </div>
        <div class="menu-config">
          <FormItem label="免费查看简历次数">
            <InputNumber
              v-model="formItem.free_resume_times"
              placeholder="请输入数字"
              type="number"
              style="width:200px"
            ></InputNumber>
            <span>&nbsp&nbsp次</span>
            <br />
            <span class="alert">免费查看收到的简历、人才库中简历的次数，填写0则没有免费次数</span>
          </FormItem>
        </div>
      </div>

      <div class="item-title">职位置顶</div>
      <FormItem label="职位置顶">
        <CheckboxGroup
          v-model="checkAllGroup"
          @on-change="checkAllGroupChange"
          class="positionChoice"
        >
          <Checkbox
            v-for="(item,index) in topList"
            :key="index"
            class="choiceItem"
            :label="item.id"
          >
            置顶{{item.time}}天&nbsp&nbsp
            <InputNumber :min="0" v-model="item.price" style="width:100px"></InputNumber>&nbsp&nbsp元
          </Checkbox>
        </CheckboxGroup>
      </FormItem>
      <FormItem>
        <Button type="primary" @click="update">保存</Button>
      </FormItem>
    </Form>
  </div>
</template>

<script>
import { AppSetting, AppSettingUpdate } from "api/recuit/setting";

export default {
  name: "",
  data () {
    return {
      formItem: {
        is_open_reward: "1",
        min_withdraw_limit: "",
        is_open_resume_pay: "0",
        resume_pay: "1",
        is_show_phone: "",
        is_audit_job: "",
        publish_job_times: "",
        refresh_job_times: "",
        free_resume_times: ""
      },
      checkAllGroup: [],
      initTopList: [
        {
          id: 1,
          time: "1",
          price: "",
          check: false,
          effect: true
        },
        {
          id: 2,
          time: "3",
          price: "",
          check: false,
          effect: true
        },
        {
          id: 3,
          time: "7",
          price: "",
          check: false,
          effect: true
        },
        {
          id: 4,
          time: "15",
          price: "",
          check: false,
          effect: true
        },
        {
          id: 5,
          time: "30",
          price: "",
          check: false,
          effect: true
        }
      ],
      topList: []
    };
  },
  components: {},
  mounted () {
    this.dealCheckAllGroup();
    this.getData();
  },
  methods: {
    //处理职位置顶选择项
    dealCheckAllGroup () {
      let topList = this.topList || this.initTopList;
      for (let i = 0; i < topList.length; i++) {
        if (topList[i].check) {
          this.checkAllGroup.push(topList[i].id);
        }
      }
      //处理topList
      let temp = [];
      for (let i = 0; i < topList.length; i++) {
        if (topList[i].effect) {
          temp.push(topList[i]);
        }
      }
      this.topList = temp;
    },
    //处理选择项
    checkAllGroupChange (data) {
      let result = false;
      for (let i = 0; i < this.topList.length; i++) {
        for (let j in data) {
          if (this.topList[i].id == data[j]) {
            result = true;
            break;
          }
        }
        if (result) {
          this.topList[i].check = true;
          if (this.topList[i].price == 0 || this.topList[i].price == "") {
            this.topList[i].price = 0;
          }
          result = false;
        } else {
          this.topList[i].check = false;
          this.topList[i].price = "";
        }
      }
    },
    //获取数据
    getData () {
      AppSetting()
        .then(result => {
          this.formItem.is_open_reward = result.is_open_reward.toString(10);
          this.formItem.min_withdraw_limit = result.min_withdraw_limit;
          this.formItem.publish_job_times = result.publish_job_times;
          this.formItem.refresh_job_times = result.refresh_job_times;
          this.formItem.free_resume_times = result.free_resume_times;
          this.formItem.is_show_phone = result.is_show_phone;
          this.formItem.is_audit_job = result.is_audit_job;

          this.formItem.is_open_resume_pay = result.is_open_resume_pay.toString(
            10
          );
          this.formItem.resume_pay = result.resume_pay;
          if (result.top_list_config) {
            this.topList = JSON.parse(result.top_list_config);
          } else {
            this.topList = this.initTopList;
          }

          console.log(this.formItem)
          this.sameTopList();
          this.dealCheckAllGroup();
        })
        .catch(err => { });
    },
    update () {
      if (this.formItem.publish_job_times < 0 || this.formItem.refresh_job_times < 0 || this.formItem.free_resume_times < 0) {
        this.$Message.error("请正确填写套餐配置信息");
        return
      }

      //判断置顶已选项是否已经输入金额
      for (let i = 0; i < this.topList.length; i++) {
        if (this.topList[i].check) {
          if (this.topList[i].price == null) {
            this.$Message.error("置顶模块-请输入金额，最低0元");
            return;
          }
        }
      }

      // 添加保存职位置顶信息
      this.formItem.top_list_config = JSON.stringify(this.topList);

      AppSettingUpdate(this.formItem)
        .then(result => {
          this.$Message.success("保存成功");
        })
        .catch(err => {
          this.$Message.error(err);
        });
    },
    sameTopList () {
      //同步生效置顶数据
      for (let i = 0; i < this.initTopList.length; i++) {
        this.topList[i].effect = this.initTopList[i].effect;
        this.topList[i].time = this.initTopList[i].time;
      }
    }
  }
};
</script>

<style scoped lang="less">
.contextForm {
  padding: 2%;
  background: white;
  .item-title {
    margin-bottom: 20px;
    padding: 8px 16px;
    font-weight: bolder;
    background-color: #f5f5f5;
    color: #333;
  }
  .alert {
    color: rgb(153, 153, 153);
    margin-top: 15px;
  }
}
.positionChoice {
  display: flex;
  flex-direction: column;
  .choiceItem {
    margin-bottom: 20px;
    width: 30%;
  }
}
.menu {
  display: flex;
  flex-direction: column;
}
.menu-config {
  height: 70px;
}
</style>
